<script lang="ts">
import Amount from './Amount.vue';
import { handleShare, useList } from './hooks';
import Progress from './Progress.vue';

export const invitationSpinPayouts = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./Payouts.vue')),
  {
    title: computed(() => $t('xlS2U9U0MGkGLqGmGbj4r')),
    wrapClassName: 'ant-cover__Modal-drawer',
    centered: true,
    footer: null,
  },
);
</script>

<script setup lang="ts">
const emits = defineEmits<{
  close: [];
}>();
const { status } = useList();
const authed = useAuthed();
function onShare() {
  handleShare(status?.value?.withdraw_status);
  emits('close');
}
</script>

<template>
  <div>
    <div class="flex flex-col gap-4">
      <TCard class="invitetion-spin-card px-5 text-center !shadow-none">
        <p class="mb-3.5 text-sm text-sys-text-body">
          {{ $t('o0skw4KnIr7qOrwKpsyc') }}
        </p>
        <Amount />
      </TCard>
      <Progress />
      <AButton type="primary" class="ant-cover__Button-3d-primary" block @click="onShare()">
        {{ authed ? $t('th6i8V2lozjJ2MqulTsln') : $t('nKx0FJevkElHhHKns8aK') }}
      </AButton>
      <!-- <AButton v-if="authed" type="primary" class="ant-cover__Button-3d-primary" block @click="$router.push('/')">
        {{ $t('ovSQdYn93Uie21zW2lrbo') }}
      </AButton> -->
    </div>
  </div>
</template>
